<template>
    <div class="person">
        姓:<input type="text" v-model="firstName"><br>
        名:<input type="text" v-model="lastName"><br>
       <!--  全名:<span>{{firstName}}-{{lastName}}</span><br> -->
         <button @click="changeFullName">将全名改为li-si</button>
       全名:<span>{{fullName}}</span><br>
       全名:<span>{{fullName}}</span><br>
       全名:<span>{{fullName}}</span><br>
       全名:<span>{{fullName}}</span><br>
    </div>
</template>
    
<script lang="ts"  setup name="Person">
import {computed, ref} from 'vue'
let firstName =ref('张')
let lastName = ref('三')
//计算属性
/*
let fullName = computed(()=>{
    console.log(1)
    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
})
*/
let fullName = computed({
    get(){
        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    },
    set(value){
       // fullName.value=value
       // console.log(value)
       const [str1,str2]= value.split('-');
       firstName.value = str1;
       lastName.value = str2;
    }
})
function changeFullName(){
    console.log(fullName)
    console.log(fullName.value)
    fullName.value='li-si'
}



</script>

<style lang="scss" scoped>

</style>